<template>
	<view class="coupon" :style='{height:height+"rpx"}'>
		<view class="coupon-empty" v-if="coupon_list.length==0">
			<Empty mode="coupon" marked="您还没有可用优惠券"></Empty>
		</view>
		<view class="coupon-item" v-for="(item,index) in coupon_list" :key="index" @click="chooseCoupon(item)">
			<view class="coupon-info">
				<view class="coupon-info-left">
					<view class="coupon-name">
						{{item.coupons.name}}
					</view>
					<view class="coupon-time">
						有效期至：{{item.expire_time.split(" ")[0]}}
					</view>
				</view>
				<view class="coupon-info-right">
					<view class="coupon-money" v-if="item.coupons.type=='1'">
						{{item.coupons.coupon_rate/10}}折
					</view>
					<view class="coupon-money" v-if="item.coupons.type=='0'">
						{{item.coupons.coupon_price}}元
					</view>
					<view class="coupon-condition">
						{{item.coupon_condition}}
					</view>
				</view>
			</view>
			<view class="coupon-rule">
				使用规则：{{item.coupons.use_rule}}
			</view>
		</view>
		<view class="bottom" @click="goBack">
			不使用优惠券
		</view>
	</view>
</template>

<script>
	import SplitLine from "../../components/bw-Split-line/bw-Split-line.vue";
	import Empty from "../../components/bw-Empty/bw-Empty.vue";
	import {couponList} from "../../api/shop.js"
	export default{
		components:{
			SplitLine,
			Empty
		},
		data(){
			return {
				height :0,
				coupon_list:[],
				ids:"",
				ids_list:[],
			}
		},
		onLoad(point) {
			this.address_id=point.addressId
			this.ids=point.ids
			//获取屏幕高度
			this.getHight()
			// this.coupon_list=[]
			couponList().then(res=>{
				this.coupon_list=res.data.data
			})
		},
		methods:{
			//获取屏幕高度
			getHight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.height = res.screenHeight*2-200
					}
				})
			},
			goBack(){
				uni.navigateBack({
					
				})
			},
			//选择优惠券
			chooseCoupon(item){
				//指定商品优惠
				console.log(item.coupons.type)
				if(item.coupons.type=="0"){
					this.ids_list=this.ids.split(",")
					this.ids_list.forEach(v=>{
						console.log(v)
						if(v==item.coupons.goods_id){
							uni.navigateTo({
								url:"/pages/orderPay/payment?ids="+this.ids+"&&couponId="+item.id+"&&addressId="+this.address_id
							})
						}
						else{
							uni.showToast({
								title:"优惠条件不满足",
								icon:"none"
							})
						}
					})
				}
				else{
					uni.navigateTo({
						url:"/pages/orderPay/payment?ids="+this.ids+"&&couponId="+item.id+"&&addressId="+this.address_id
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.coupon{
		width: 100%;
		
		overflow-y: auto;
		background-color: #F9F9F9;
		.coupon-empty{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.coupon-item{
			width: 680rpx;
			height: 248rpx;
			margin: 30rpx auto;
			background: url(../../static/Shop/hb.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border: 1px dashed #000000;
			.coupon-info{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 30rpx 0 30rpx;
				.coupon-info-left{
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.coupon-name{
						font-size: 30rpx;
						font-weight: bolder;
					}
					.coupon-time{
						color: #777777;
						font-size: 24rpx;
					}
				}
				.coupon-info-right{
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.coupon-money{
						font-size: 36rpx;
						color: #A31F1F;
					}
					.coupon-condition{
						color: #777777;
						font-size: 24rpx;
					}
				}
			}
			.coupon-rule{
				padding: 0 20rpx 12rpx 30rpx;
				font-size: 24rpx;
				color: #777777;
				height: 68rpx;
				display: flex;
				align-items: center
			}
		}
		.bottom{
			width: 100%;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0px;
			left: 0px;
			font-size: 32rpx;
			font-weight: bolder;
		}
	}
</style>
